import Map from 'ol/Map';
import { OSM, BingMaps, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import View from 'ol/View';
import { Attribution, FullScreen, defaults as defaultControls } from 'ol/control';
import { GeoJSON } from 'ol/format'
import { platformModifierKeyOnly } from 'ol/events/condition';
import { Select, DragBox } from 'ol/interaction'

////////////////////        按住 ctrl + 鼠标左键，拖拽，就可以框选地图上的一些元素。     \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

const vectorSource = new VectorSource({
    
    url: 'data/geojson/countries.geojson',
    format: new GeoJSON(),
});

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
        new VectorLayer({
            //这是一个能选择的地图源
            source: vectorSource,
        }),
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2,
        constrainRotation: 16,
    }),
    // interactions:[//交互
    //     new ol.interaction.Select(),//选择
    //     new ol.interaction.DragBox({
    //         condition: ol.events.condition.platformModifierKeyOnly
    //     })//画框
    // ],
});

// a normal select interaction to handle click
const select = new Select();

//添加交互
map.addInteraction(select);

const selectedFeatures = select.getFeatures();

// a DragBox interaction used to select features by drawing boxes
const dragBox = new DragBox({
    condition: platformModifierKeyOnly,
});

//添加交互
map.addInteraction(dragBox);

dragBox.on('boxend', function () {
    // features that intersect the box geometry are added to the
    // collection of selected features

    // if the view is not obliquely rotated the box geometry and
    // its extent are equalivalent so intersecting features can
    // be added directly to the collection
    const rotation = map.getView().getRotation();
    const oblique = rotation % (Math.PI / 2) !== 0;
    const candidateFeatures = oblique ? [] : selectedFeatures;
    const extent = dragBox.getGeometry().getExtent();
    vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) {
        candidateFeatures.push(feature);
    });

    // when the view is obliquely rotated the box extent will
    // exceed its geometry so both the box and the candidate
    // feature geometries are rotated around a common anchor
    // to confirm that, with the box geometry aligned with its
    // extent, the geometries intersect
    if (oblique) {
        const anchor = [0, 0];
        const geometry = dragBox.getGeometry().clone();
        geometry.rotate(-rotation, anchor);
        const extent = geometry.getExtent();
        candidateFeatures.forEach(function (feature) {
            const geometry = feature.getGeometry().clone();
            geometry.rotate(-rotation, anchor);
            if (geometry.intersectsExtent(extent)) {
                selectedFeatures.push(feature);
            }
        });
    }
});

// clear selection when drawing a new box and when clicking on the map
dragBox.on('boxstart', function () {
    selectedFeatures.clear();
});

const infoBox = document.getElementById('info');

selectedFeatures.on(['add', 'remove'], function () {
    const names = selectedFeatures.getArray().map(function (feature) {
        return feature.get('name');
    });
    if (names.length > 0) {
        infoBox.innerHTML = names.join(', ');
    } else {
        infoBox.innerHTML = 'No countries selected';
    }
});
